<template>
    <div>
        <!--  搜索区    -->
        <div>
            <div style="display: flex;justify-content: space-between;margin-bottom: 20px">
                <div>
                    <el-input style="width: 300px;margin-right: 10px"
                              prefix-icon="el-icon-search"
                              v-model="publishName"
                              @keydown.enter.native="initNotice"
                              clearable
                              @clear="initNotice"
                              placeholder="请输入员工名进行搜索..."></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="initNotice">搜索
                    </el-button>
                </div>
                <el-button type="primary" icon="el-icon-plus" @click="addNoticeView">添加</el-button>
            </div>
        </div>
        <!--   表格显示区   -->
        <div>
            <el-table
                    :data="notices"
                    border
                    size="mini"
                    stripe>
                <el-table-column
                        type="selection"
                        align="left"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="ID"
                        align="left"
                        fixed
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        show-overflow-tooltip
                        align="left"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="content"
                        show-overflow-tooltip
                        label="内容"
                        align="left"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="state"
                        label="状态"
                        align="left"
                        width="120">
                    <template slot-scope="{row: {state}}">
                        <span style="background-color: #F56C6C;font-size: 14px;color: white" v-if="+state === 0">已删除</span>   <!--+号转为数字进行全等比较-->
                        <span style="background-color: #67C23A;font-size: 14px;color: white" v-else>正常</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="publishName"
                        label="发布人"
                        align="left"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="createDate"
                        label="创建时间"
                        align="left"
                        width="150">
                    <template slot-scope="scope">{{scope.row.createDate | dateyyyyMMddhhmmssFormat}}</template>
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="showEditNoticeView(scope.row)">编辑</el-button>
                        <el-button type="danger" @click="deleteNoticeView(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!--  分页栏      -->
            <div style="display: flex;justify-content: flex-end">
                <el-pagination
                        background
                        @current-change="currentChange"
                        @size-change="sizeChange"
                        layout="sizes,prev, pager, next, jumper, ->, total"
                        :total="total">
                </el-pagination>
            </div>
        </div>
        <!--   编辑和新增弹框   -->
        <el-dialog
                :title="dialogTitle"
                :visible.sync="dialogVisible"
                width="30%">
            <div style="display: flex;justify-content: space-around;align-items: center">
                <el-form ref="noticeForm" :model="notice" :rules="rules">
                    <el-form-item label="编  号" label-width="120px">
                        <el-input disabled v-model="notice.id"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="发布人" label-width="120px" prop="publishName">
                        <el-input v-model="notice.publishName"  autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item  label="标题" label-width="120px" prop="title">
                        <el-input type="textarea" v-model=notice.title></el-input>
                    </el-form-item>
                    <el-form-item  label="内容" label-width="120px" prop="content">
                        <el-input type="textarea" v-model=notice.content></el-input>
                    </el-form-item>
                    <el-form-item  label="状态" label-width="120px">
                        <el-select :disabled="stateDisabled" v-model="notice.state" placeholder="请选择...">
                            <el-option
                                    v-for="item in noticeStates"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item   label="发布日期" label-width="120px" prop="createDate">
                        <el-col>
                            <el-date-picker type="datetime" placeholder="选择日期" v-model="notice.createDate" style="width: 100%;"></el-date-picker>
                        </el-col>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="doAddNotice">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "SysLog",
        mounted() {
            this.initNotice();
        },
        data(){
            return {
                notices:[], //通告信息
                publishName: '', //根据发布人查询
                currentPage: 1,
                size: 10,
                total: 0,
                //编辑和新增弹框
                dialogTitle:'', //弹框标题
                dialogVisible: false,  //是否显示
                notice:{
                    id:null,
                    publishName:'',
                    title:'',
                    content:'',
                    state:null,
                    createDate:null
                },
                rules: {
                    publishName: [
                        { required: true, message: '请输入发布人名字', trigger: 'blur' },
                        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                    ],
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { min: 1, max: 100, message: '长度在 1 到 100 个字符', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' },
                        { min: 1, max: 255, message: '长度在 1 到 255 个字符', trigger: 'blur' }
                    ],
                    createDate: [
                        { required: true, message: '请选择日期', trigger: 'blur' },
                    ]
                },

                stateDisabled: false, //状态是否可用
                noticeStates:[
                    {
                        value: 0,
                        label: '已删除'
                    }, {
                        value: 1,
                        label: '正常'
                    }
                ]
            }
        },
        methods:{
            initNotice(){
                this.getRequest('/system/notice/?currentPage=' + this.currentPage + '&size=' + this.size + '&publishName='+this.publishName).then(resp =>{
                    if(resp){
                        this.notices = resp.data;
                        this.total = resp.total;
                    }
                })
            },
            //添加 -》 打开窗口
            addNoticeView(){
                this.notice = {
                    id:null,
                    publishName:'',
                    title:'',
                    content:'',
                    state:null,
                    createDate:null
                }
                this.dialogTitle = '添加通告'
                this.dialogVisible = true
                this.notice.state = 1
                this.notice.publishName = this.$store.state.currentAdmin.username
                this.stateDisabled = true
            },
            //编辑
            showEditNoticeView(data){
                this.dialogTitle = '编辑通告'
                this.dialogVisible = true
                this.notice = data
                this.stateDisabled = false
            },
            //删除
            deleteNoticeView(data){
                this.$confirm('此操作将删除 【' + data.title  + '】, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteRequest('/system/notice/'+data.id).then(resp => {
                        if (resp) {
                            this.initNotice();
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //currentPage 改变时会触发
            currentChange(currentPage) {
                this.currentPage = currentPage;
                this.initPerTrain();
            },
            //pageSize 改变时会触发
            sizeChange(size) {
                this.size = size;
                this.initPerTrain();
            },
            doAddNotice(){
                if(this.notice.id){ //通过是否有id进行新增或修改
                    this.$refs['noticeForm'].validate(valid => {
                        if (valid) {
                            this.putRequest('/system/notice/', this.notice).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initNotice();
                                }
                            })
                        }
                    })
                } else {
                    this.$refs['noticeForm'].validate(valid => {
                        if (valid) {
                            console.log(this.pm)
                            this.postRequest('/system/notice/', this.notice).then(resp => {
                                if (resp) {
                                    this.dialogVisible = false;
                                    this.initNotice();
                                }
                            })
                        }
                    })
                }
            }
        }
    }
</script>

<style scoped>

</style>